<template>
  <div class="exam-start">
    <div class="exam-start-bg">
      <div class="bg-img">
        <img class="white" src="@/assets/ceshi02.png" alt="">
        <img class="head-img" src="@/assets/ceshi03.png" alt="">
        <div class="cons">
          <p class="title">智保天赋·{{article_text}}试题</p>
          <p class="number">{{adultNum}}/38</p>
          <div class="progress">
            <span class="progress-active" :style="'width: '+progress_width"></span>
          </div>          
          <div class="subject" v-html="content">
          </div>    
        </div>
        <div class="btn">
          <span class="left" @click="save(1, adultNum)">A. 是的</span>
          <span class="right" @click="save(0, adultNum)">B. 不完全是</span>
        </div>
      </div>
    </div>    
    <div class="mask-div" v-if="is_show">
      <div class="mask-bg"></div>
      <div class="content">
        <p class="title">是否继续上次未答完试题</p>
        <p class="tip">您上次选择了{{article_text}}答到第{{adultNum}}题，是否继续上次剩下的题目</p>
        <div class="btn">
          <span class="left" @click="start('continue')">
            重新开始
          </span>
          <span class="right" @click="play('continue')">
            继续
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import { adultExam, saveAdultl } from "@/api/api";
import { AlertModule } from "vux" ;
  export default {
    components: {
    },
    data () {
      return {
        message: '',
        examList: [],
        type: "",
        adultNum: 0,
        content: null,
        is_show: false,
        progress_width: 0,
        order_id: '',
        is_click: false,
        is_true: 1,  //回答题目
        article_type: '',
        article_text: "",
      }
    },
    created () {
      switch (this.$route.query.article_type) {
        case 'adult':
          this.article_type = 2;
          this.article_text = "成人";
          break;
        case 'children': 
          this.article_type = 0;
          this.article_text = "儿童";
          break;
        case 'juvenile':
          this.article_type = 1;
          this.article_text = "少年";
          break;
      }
      this.key = this.$route.query.key;
      if(!localStorage.getItem("adultNum")){
        localStorage.setItem("adultNum", 0);
        this.adultNum = 0;
        this.exams();
      }else{
        this.adultNum = localStorage.getItem("adultNum");
        this.is_show = true;
      }
    },

    methods: {
      exams() {
        this.adultNum++;
        if(this.adultNum > 38){
          this.adultNum = 38;
          if(this.article_type == '2'){
            this.$router.push({path: './examResult', query: {order_id: localStorage.getItem("order_id"), article_type: this.article_type}});
          }else{
            this.$router.push({path: './examResultChild', query: {order_id: localStorage.getItem("order_id"), article_type: this.article_type}});
          }          
          return;
        }
        localStorage.setItem("adultNum", this.adultNum);
        this.adult_exams()
      },
      // 成人接口
      adult_exams() {
        var article = {
          article_id: this.adultNum,
          article_type: this.article_type
        }        
        this.is_click = true;
        adultExam(article).then((res) => {
          var content = res.data.data.list.content
          this.play()
          this.content = content.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&quot;/g, '"').replace(/&apos;/g, "'");
        }).catch((err) => {
          console.dir(err);
        })
      },
      // 重新开始
      start(type) {
        this.progress_width = 1 / 38*100 + '%';
        this.adultNum = 1;
        localStorage.setItem("adultNum", 1);
        if(type == 'continue'){
          this.is_show = false;
          this.adult_exams();
        }
      },
      // 继续
      play(type) {
        this.adultNum = localStorage.getItem("adultNum");
        this.progress_width = this.adultNum* (1 / 38)*100 + '%';
        if(type == 'continue'){
          this.is_show = false;
          this.adult_exams();
        }
      },
      save(is_true, adultNums) {
        console.log(this.adultNum, adultNums, this.is_click)
        this.is_true = is_true;
        if(!this.is_click){
          return;
        }
        this.is_click = false;
        var dataJson = {
          answer: this.is_true,
          article_id: this.adultNum,
          article_type: this.article_type,
          miyao: this.key+"",
          order_id: this.order_id
        }
        // 做一条保存一次
        saveAdultl(dataJson).then((res) => {
          if(res.data.code == "200"){
            if(res.data.data.order_id){                
              this.order_id = res.data.data.order_id
              localStorage.setItem("order_id", this.order_id);
            }
          }       
        }).then(() => {
          this.exams()
        }).catch((err) => {
          console.dir(err)
        })
      }
    }
  }
</script>

<style lang="stylus" scoped>
.exam-start
  .exam-start-bg
    width 100%
    height 100vh
    background-image url('../../assets/ceshi01.png')
    background-size cover
    .bg-img
      width calc(100% - 2.5rem)
      position absolute
      top 50%
      left 1.25rem
      height 47rem
      margin-top -23.5rem
      .white
        width 100%
        height 100%
      .head-img
        position absolute
        top -2.4rem
        width 7.8rem
        height 7.8rem
        border-radius 50%
        overflow hidden
        left 50%
        margin-left -3.9rem      
      .btn
        position absolute
        bottom 3rem
        left 2.7rem
        overflow hidden
        padding 1rem 0
        span
          display block
          width 14rem
          float: left
          text-align center
          line-height 5rem
          height 5rem
          border-radius 100px
          font-size 1.7rem
          &:active
            position relative
            top .5rem
            transition all .1s
        .left
          color #333
          background-color #E6E6E6
          margin-right 2rem
        .right
          color #fff
          background-color #172F6D
      .cons
        position absolute
        width 100%
        top 7rem
        .title
          color #33
          font-size 1.9rem
          text-align center
          height 2.5rem
          line-height 2.5rem
          font-weight bold
        .number
          color #172F6D
          font-size 1.3rem
          height 1.8rem
          line-height 1.8rem
          text-align center
          margin-top 1.5rem
        .progress
          width 70%
          margin-left 15%
          background-color #ccc
          border-radius 100px
          height .6rem
          position relative
          margin-top 1.3rem
          .progress-active
            width 0
            display block
            position absolute
            left 0
            height .6rem
            background-color #172F6D
            border-radius 100px
            transition width 1s
        .subject
          width 70%
          margin-left 15%
          line-height 2.4rem
          font-size 1.5rem
          color #000
          margin-top 1.5rem
  .content
    width 78%
    left 11%
    background-color #fff
    border-radius .3rem
    text-align center
    top 15.4rem
    .title
      font-size 1.7rem
      line-height 1.7rem
      height 1.7rem
      color #333
      font-weight 500
      margin-top 2.2rem
      margin-bottom 2.5rem
    .tip
      font-size 1.3rem
      line-height 2rem
      margin 0 3rem
    .btn
      height 5rem
      line-height 5rem
      display block
      width 100%
      font-size 1.5rem
      text-align center
      border-top 1px solid #e6e6e6
      margin-top 2.5rem
      overflow hidden
      span
        width 50%
      .left
        float left
        color #666666
        position relative
        &::after
          content ''
          position absolute
          right 0
          height 60%
          top 20%
          border-right 1px solid #E6E6E6
      .right
        float left
        color #152D6F
</style>
